<template>
  <div>
    <el-form
      :inline="false"
      ref="formDataRef"
      :model="formData"
      :rules="formDataRules"
      style="padding:20px"
      size="mini"
      label-width="120px"
    >
      <el-form-item prop="customerNameShort" label="客户简称">
        <el-input
          v-model="formData.customerNameShort"
          clearable
          placeholder="请填写客户简称"
          @input="checkCustomerNameShort"
        />
        <span style="color: red">{{tips}}</span>
      </el-form-item>
        <el-form-item prop="logisticsAttnName" label="联系人">
          <el-input
            v-model="formData.logisticsAttnName"
            clearable
            placeholder="请填写联系人"
          />
        </el-form-item>
      <el-form-item prop="position" label="职位">
        <el-select v-model="formData.position" filterable clearable>
          <el-option
            v-for="(itm, idx) in positionSource"
            :key="idx"
            :label="itm"
            :value="idx"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="logisticsTelephone" label="手机号">
        <el-input
          v-model="formData.logisticsTelephone"
          clearable
          placeholder="微信，手机，QQ必填一项"
        />
      </el-form-item>
      <el-form-item prop="logisticsQQ" label="QQ">
        <el-input
          v-model="formData.logisticsQQ"
          clearable
          placeholder="微信，手机，QQ必填一项"
        />
      </el-form-item>
      <el-form-item prop="customerWeChat" label="微信">
        <el-input
          v-model="formData.customerWeChat"
          clearable
          placeholder="微信，手机，QQ必填一项"
        />
      </el-form-item>
      <el-row>
        <el-button size="mini" type="success" @click="setCustomerPhone">填充手机号</el-button>
        <el-button size="mini" type="success" @click="setCustomerQQ">填充QQ号</el-button>
      </el-row>
      <el-form-item label="来源" prop="customerSourceCode">
        <el-select v-model="formData.customerSourceCode" filterable clearable>
          <el-option
            v-for="(itm, idx) in customerSourceSource"
            :key="parseInt(idx)"
            :label="itm"
            :value="parseInt(idx)"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="预估客户等级" prop="customerLevel">
        <el-select v-model="formData.customerPredictLevel" placeholder="此客户等级由销售评估" filterable clearable>
          <el-option
            v-for="(itm, idx) in newCustomerLevelSource"
            :key="parseInt(idx)"
            :label="itm"
            :value="parseInt(idx)"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="customerFullName" label="客户全称">
        <el-input
          v-model="formData.customerFullName"
          clearable
          placeholder=""
        />
      </el-form-item>
      <el-button size="mini" type="success" @click="repeatInfo"
      >查询是否重复</el-button
      >
    <el-form-item prop="provincesModel" label="联系地址">
      <el-cascader
        v-model="formData.provincesModel"
        filterable
        :options="cityOptions"
        @change="cityHandleChange"
      />

    </el-form-item>
    <el-form-item prop="businessAddress" label="详细地址">
      <el-input
        v-model="formData.businessAddress"
        clearable
        placeholder="请填写详细地址"
      />
    </el-form-item>
      <el-form-item prop="logisticsEmail" label="邮箱">
        <el-input
          v-model="formData.logisticsEmail"
          clearable
          placeholder=""
        />
      </el-form-item>
      <el-form-item prop="remark" label="备注">
        <el-input
          type="textarea"
          :rows="3"
          placeholder="在此处录入潜在客户的相关情况，包括但不限于录入此客户的原因"
          v-model="formData.remark"
        />
      </el-form-item>
<!--      <el-form-item label="销售" prop="salesman">-->
<!--        <el-select v-model="formData.salesman" filterable clearable>-->
<!--          <el-option-->
<!--            v-for="(itm, idx) in userSource"-->
<!--            :key="parseInt(idx)"-->
<!--            :label="itm"-->
<!--            :value="parseInt(idx)"-->
<!--          />-->
<!--        </el-select>-->
<!--      </el-form-item>-->
    <div>
      <el-button size="mini" type="primary" @click="submitForm('formDataRef')"
      >确定</el-button
      >
    </div>
    </el-form>
  </div>
</template>

<script>

import { ajax } from "@/store/yg/common/utils";
import { getPcas } from "@/utils/city-pcas.js";
import { m } from "@/store/yg/common/local";
import { closeDialog } from "@/utils";
import { validate } from "@/utils/validate";

export default {
  props: ["row", "data", "more"],
  data() {
    return {
      tips:null,
      examineMessage: null,
      cityOptions: getPcas(),
      customerSourceSource:{},
      userSource:{},
      positionSource:{},
      newCustomerLevelSource:{},
      formData: {
        customerNameShort: null,
        customerPredictLevel:"",
        registeredAttn: "",
        position: "",
        logisticsAttnName:"",
        logisticsTelephone:"",
        logisticsEmail:"",
        registeredMobilePhoneNumber: "",
        customerQQ: "",
        customerWeChat: "",
        customerSourceCode: "",
        customerFullName: "",
        provincesModel: "",
        state:"",
        city:"",
        area: "",
        street:"",
        businessAddress:"",
        customerEmail:"",
        remark:"",
        salesman:""
      },
      oldCustomerFullName:"",
      formDataRules:{
        customerNameShort: [
          { required: true, message: "请填写客户简称", trigger: "blur" }
        ],
        logisticsAttnName: [
          { required: true, message: "请填写联系人", trigger: "blur" }
        ],
        customerSourceCode: [
          { required: true, message: "请选择来源", trigger: "change" }
        ],
        position: [
          { required: true, message: "请选择职位", trigger: "blur" }
        ],
        remark: [
          { required: true, message: "请填写备注", trigger: "blur" }
        ],
        logisticsEmail: [
          {
            required: false,
            trigger: "blur"
          },
          {
            pattern: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
            message: "请填写正确的邮箱"
          }

        ]
      }

    };
  },
  mounted() {
    this.init();
    //点编辑请求接口
    if (this.$store.state.edit.id) {
      this.editData();
      //加载地址信息
    }
    // this.formData=this.data;
  },
  methods: {
    async editData(){
      let res = await ajax("queryById", {
        id: this.$store.state.edit.id
      });
      if (res !== null) {
        this.formData=res;
        this.formData.provincesModel=[res.state,res.city,res.area,res.street];
        this.oldCustomerFullName=res.customerFullName;
      } else {
        this.$message.error("服务器异常");
      }
    },
    async init() {
      const attrs = {
        class: "com.tofba.app.client.customer.CustomerBalanceDetailClient"
      };
      let initRes = await ajax("init", {}, attrs);
      console.log(initRes);
      if (!initRes) {
        this.$message.error("初始化页面信息失败，请刷新重试");
        return;
      }
      this.customerSourceSource = initRes.customerSourceSource;
      this.userSource=initRes.userSource;
      this.positionSource=initRes.positionSource;
      this.newCustomerLevelSource=initRes.newCustomerLevelSource;

    },
    cityHandleChange(val) {
      console.log("this.val", val);
      if (!val) return;
      if (val[3] === "暂不选择") {
        val[3] = "";
      }
      for (let i of this.cityOptions) {
        for (let v of i.children) {
          for (let k of v.children) {
            for (let j of k.children) {
              if (j.label === "暂不选择") {
                j.label = "";
              }
            }
          }
        }
      }
      this.formData.state = val[0];
      this.formData.city = val[1];
      this.formData.area = val[2];
      this.formData.street = val[3];
    },
    //数据校验
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.save();
        } else {
          console.log("数据校验失败，不允许提交");
          return false;
        }
      });
    },
    save(){
      ajax("save", this.formData).then(
        res => {
          if (res.code == 200) {
            this.$message.success("添加成功");
            closeDialog();
            location.reload();
          } else {
            if (res.message){
              this.$message.error(res.message);
            }else {
              this.$message.error("添加失败");
            }
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    repeatInfo(){
      console.log(this.formData);
      if(this.formData.customerFullName==""){
        this.$message.error("请填写客户全称");
        return;
      }
      console.log(this.oldCustomerFullName);
      console.log(this.formData.customerFullName);
      // if(this.oldCustomerFullName==this.formData.customerFullName){
      //   this.$message.error("请填写新的客户全称");
      //   return;
      // }
      const attrs = {
        class: "com.tofba.app.client.customer.CustomerHopeClient"
      };
      ajax("customerFullNameRepeat", this.formData).then(
        res => {
          if (res.code != 200) {
            this.$message.error("客户全称已经存在,请更换");
          } else {
            this.$message.success("未发现重复信息");
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    setCustomerPhone(){
      if(this.formData.registeredMobilePhoneNumber!=null && this.formData.registeredMobilePhoneNumber!=''){
         this.formData.customerWeChat=this.formData.registeredMobilePhoneNumber;
      }
    },
    setCustomerQQ(){
      if(this.formData.registeredMobilePhoneNumber!=null && this.formData.registeredMobilePhoneNumber!=''){
        this.formData.customerWeChat=this.formData.customerQQ;
      }
    },
    checkCustomerNameShort(){
      console.log("新----",this.formData)
      const attrs = {
        class: "com.tofba.app.client.customer.CustomerInfoClient"
      };
      ajax("checkCustomerNameShort", this.formData,attrs).then(
        res => {
          if (res.code != 200) {
            this.tips=res.message;
          }else{
            this.tips=null;
          }
        });
    }
  }
};
</script>

<style scoped>
</style>
